<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }
    .purple {
      color: purple;
    }
  </style>
</head>
<body>
  <!-- 3.创建div -->
  <h1>vue的指令</h1>
  <div id="app">
    <!-- 文本插值 -->
    <p v-bind:class="color">姓名：{{person.name}}</p>
    <p>年龄：{{person.age}}岁的老同志</p>
    <p>职位：{{person.title}}</p>
    <p>口头禅：{{person.say}}</p>
    <p>{{person.hasWude?'':'不'}}讲武德</p>
    <p v-for="(item, index) in person.arr"
      :title="'￥'+item.price+'元'"
      v-on:click="showMoney(item.price)"
      >
    <span>{{index + 1}}. 名称：{{item.name}}</span>
    <i>费用：￥{{item.price}}元</i>
    </p>
    <hr />
    <!-- 指令 -->
    <!-- v-text：显示文字内容 -->
    <p v-text="person.name"></p>
    <p v-text="person.age"></p>
    <p v-text="person.title"></p>
    <!-- v-html：显示带有html格式的文本 -->
    <p v-html="person.say"></p>
    <p v-if="person.hasWude">讲武德</p>
    <p v-else>不讲武德</p>
  </div>
  <!-- 1.引入vue的源码 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 2.写自己的vue代码 -->
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        person: {
          name: 'Ma Baogguo',
          age: 69,
          hasWude: false,
          gongFu: '闪电五连鞭',
          title: '浑元形意太极门掌门',
          say:'<mark>年轻人你要耗子尾汁</mark>',
          arr: [
            {
              name: '第一招',
              price: 500
            },
            {
              name: '第二招',
              price: 1000
            },
            {
              name: '第三招',
              price: 1500
            },
            {
              name: '第四招',
              price: 2500
            },
            {
              name: '第五招',
              price: 5000
            }
          ]
        },
        color: 'red'
      },
      methods: {
        showMoney(price) {
          alert(price)
        }
      },
    })
  </script>
</body>
</html>